<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		<!-- 导入axios标签 -->
		<script src="../js/axios.js"></script>
		<script>
		
			// 编辑ajax请求
			//常用请求方式的类型：get/delete / post /put 
			//分析： get 	delete 同种类型 ajax语法相同
			//			post 	put 同种类型 ajax语法相同
			
			/**1.get请求
			 * url: http://localhost:8080/getUser
			 * 返回值: List集合JSON数据
			 * */
			 
			 axios.get("http://localhost:8080/getUser")
					.then(function(result){
						//data是Axios封装的promise对象
						//注意事项: 获取服务器返回值通过打他属性
						console.log(result.data)
					})
					
			 /**2.get 带参数的请求方式 ？好拼接的方式
			 url: http://localhost:8080/getUserById?id=1
			 返回值: List集合JSON数据
			 适用场景: 参数只有个别
			  * */
			  axios.get("http://localhost:8080/getUserById?id=1")
					.then(function(result){
						console.log(result.data)
					})
					
					/**3. params对象方式的提交
					如果将来的参数有多个,则可以封装params对象.简洁
					 * */
			  axios.get("http://localhost:8080/getUserById",{
				  params: {
					  id: 1
				  }
			  }).then(function(result){
					 	console.log(result.data)
					})
			 
			 
			 /* 4. 利用restFul风格实现数据传参
			 				restFul: 
			 					1.参数使用/分割
			 					2.url中不能出现动词
			 			 */
			axios.get("http://localhost:8080/user/5")
					.then((result) => {
				console.log("AAAAA")
				console.log(result.data)
			})
			
			
			//axios 删除
			axios.delete("http://localhost:8080/user/1")
					.then(result =>{
						console.log(result.data)
					})
					
			/*第二组: post 	put
			1.对象方式提交
			url: http://localhost:8080/addUser
			*/	
		   axios.post("http://localhost:8080/addUser1",{
			   name: "黑熊精",
			   age: 3000,
			   sex: "男"
		   }).then(result =>{
			   console.log("post")
			   console.log(result.data)
		   })
		   
		   /**
			*2.axios利用form表单提交数据
			* 不常用
			* */
		   let params = new URLSearchParams();
		   params.append("name","蝎子精")
		   params.append("age",700)
		   params.append("sex","女")
		   
		   axios.post("http://localhost:8080/addUserForm",params)
					.then(result =>{
						console.log("form表单提交ok")
						console.log(result.data)
					})
					
			/**
			 *3. restFul方式实现数据提交 
			 **/		
			axios.post("http://localhost:8080/user/琵琶精/900/女")
					.then(result => {
						console.log("restFul实现数据提交3")
						console.log(result.data)
				})
				
				
			/**
			* Put请求
			* 需求: 修改id=256的name="文殊菩萨"  要求使用restFul
			*/
			axios.put("http://localhost:8080/user/256/文殊菩萨")
					.then(result => {
						console.log("restFul实现数据提交put")
						console.log(result.data)
					})	
		
		
			//设定基本的URL地址
			axios.defaults.baseURL = "http://localhost:8080"
			axios.put("/user/256/文殊菩萨")
					.then(result => {
						console.log("axios简化")
						console.log(result.data)
					})	
			
		</script>
	</body>
</html>
